import React, { Fragment, useEffect, useState, type CSSProperties, type ReactNode } from "react"
import clsx from "clsx"
import { View } from "@tarojs/components"
import { type IconProps } from "@taroify/icons/shared"
import Taro from "@tarojs/taro"
import { navigation } from "@/utils/router"
import { tabbarPages } from "@/constants/pageMap"
import { useLayout } from "@/utils/hooks"
import Icon from "@/components/GpFontIcon"

type IProps = {
  /**
   * iconfont icon name for navigationBar left home icon.
   * @default "icon-dingbu-shouye" */
  homeIcon?: string
  arrowLeftProps?: Pick<IconProps, "size" | "color">
  className?: string
  /** @default 0 */
  navBarOffset?: number
  /** @default `#fff` */
  navigationBarBackgroundColor?: string
  /** @default `#333333` */
  navigationBarTextStyle?: CSSProperties["color"]
  navigationBarTitleText: string | null
  /** @default `#fafafd` */
  backgroundColorTop?: CSSProperties["color"]
  renderLeftExtra?: (backHandler: () => void) => ReactNode
  /**
   * @default true
   */
  navigationBarPlaceholder?: boolean
  placeholderClassName?: string
  onLayout?: (layoutInfo: NavigationBaseLayout) => any
  onBeforeBack?: () => any
}
/**
 * @description 自定义导航栏
 * @component GpNavbar
 */
export default function GpNavbar({
  homeIcon = "icon-dingbu-shouye",
  arrowLeftProps = {},
  className,
  navBarOffset = 0,
  navigationBarBackgroundColor = "#fff",
  navigationBarTextStyle = "#333333",
  navigationBarTitleText,
  backgroundColorTop = "#fafafd",
  renderLeftExtra,
  navigationBarPlaceholder = true,
  placeholderClassName,
  onLayout,
  onBeforeBack
}: IProps) {
  const [layout, isReady] = useLayout(navBarOffset)
  const [isEntry, setIsEntry] = useState<boolean>(false)
  useEffect(() => {
    setIsEntry(Taro.getCurrentPages().length <= 1)
  }, [])
  useEffect(() => {
    if (isReady) {
      onLayout &&
        onLayout({
          statusBarHeight: layout.statusBarHeight,
          navigationHeight: layout.navigationHeight
        })
    }
  }, [isReady])
  function handleArrowLeftClick() {
    if (!isEntry) {
      onBeforeBack && onBeforeBack()
      Taro.navigateBack()
    } else {
      navigation(tabbarPages.index, null, "reLaunch")
    }
  }
  const iconColor = arrowLeftProps.color || "#333333"
  const iconSize = arrowLeftProps.size || 40
  return (
    <Fragment>
      <View
        className={clsx("box-border fixed left-0 right-0 top-0 GpNavbar__navbar", className)}
        style={{
          backgroundColor: navigationBarBackgroundColor,
          zIndex: 99999999
        }}
      >
        <View
          className="box-border GpNavbar__status-bar"
          style={{
            height: layout.statusBarHeight + "px"
          }}
        ></View>
        <View
          className="box-border flex flex-row relative justify-center items-center  GpNavbar__navigation-bar"
          style={{
            height: layout.navigationHeight + "px"
          }}
        >
          <View className="top-0 left-0 bottom-0 h-full pl-32px box-border absolute flex flex-row items-center">
            {isEntry ? (
              <Icon
                icon={homeIcon}
                color={iconColor}
                size={iconSize}
                onClick={handleArrowLeftClick}
              />
            ) : (
              <Icon
                icon="icon-dingbu-fanhui"
                color={iconColor}
                size={iconSize}
                onClick={handleArrowLeftClick}
              />
            )}
            <View className="ml-12px box-border">{renderLeftExtra?.(handleArrowLeftClick)}</View>
          </View>
          {navigationBarTitleText && (
            <View
              className="text-36px font-500 box-border"
              style={{
                color: navigationBarTextStyle,
                fontFamily: "PingFang SC"
              }}
            >
              {navigationBarTitleText}
            </View>
          )}
        </View>
      </View>
      {navigationBarPlaceholder && (
        <View
          className={clsx("box-border GpNavbar__placeholder", placeholderClassName)}
          style={{
            height: layout.statusBarHeight + layout.navigationHeight + "px",
            backgroundColor: backgroundColorTop
          }}
        ></View>
      )}
    </Fragment>
  )
}
